<template>
  <div class="strut-div" id="touristApp"></div>
</template>

<script>
  import echarts from 'echarts'
  export default {

    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.chart = echarts.init(document.getElementById('touristApp'));

      var plantCap = [{
        name: '电话通讯',
        value: 6.0
      }, {
        name: '综合资讯',
        value: 12.4
      }, {
        name: '金融理财',
        value: 16.2
      }, {
        name: '视频服务',
        value: 12.6
      }, {
        name: '办公管理',
        value: 3.4
      }, {
        name: '电子商务',
        value: 15.3
      }, {
        name: '聊天社交',
        value: 18.2
      }, {
        name: '便捷生活',
        value: 4.4
      }, {
        name: '旅游出行',
        value: 8.2
      }, {
        name: '系统工具',
        value: 3.3
      }];

      var datalist = [{
        offset: [88, 57],
        opacity: .75,
        color: '#D2CEEF'
      }, {
        offset: [43, 77],
        opacity: .88,
        color: '#B5C3F0'
      }, {
        offset: [39, 42],
        opacity: .84,
        color: '#B5C3F0'
      }, {
        offset: [83, 30],
        opacity: .8,
        color: '#839DE7'
      }, {
        offset: [40, 15.5],
        opacity: .75,
        color: '#FFD694'
      }, {
        offset: [59.5, 18.5],
        opacity: .6,
        color: '#FFD694'
      }, {
        offset: [65, 57],
        opacity: .68,
        color: '#D8EEE2'
      }, {
        offset: [27, 19],
        opacity: .6,
        color: '#7CCAA2'
      }, {
        offset: [23, 64.5],
        opacity: .68,
        color: '#BEE5D0'
      }, {
        offset: [19, 44],
        opacity: .6,
        color: '#8985D2'
      }];
      var datas = [];
      for (var i = 0; i < plantCap.length; i++) {
        var item = plantCap[i];
        var itemToStyle = datalist[i];
        datas.push({
          name: item.name + '\n' + item.value + ' %',
          value: itemToStyle.offset,
          symbolSize: Math.sqrt(item.value * 10) * 10,
          label: {
            normal: {
              textStyle: {
                fontSize: 13
              }
            }
          },
          itemStyle: {
            normal: {
              color: itemToStyle.color,
              opacity: itemToStyle.opacity
            }
          },
        })
      }
      var option = {
        grid: {
          show: false,
          top: 10,
          bottom: 10
        },
        xAxis: [{
          gridIndex: 0,
          type: 'value',
          show: false,
          min: 0,
          max: 100,
          nameLocation: 'middle',
          nameGap: 5
        }],
        yAxis: [{
          gridIndex: 0,
          min: 0,
          show: false,
          max: 100,
          nameLocation: 'middle',
          nameGap: 30
        }],
        series: [{
          type: 'scatter',
          symbol: 'circle',
          symbolSize: 120,
          label: {
            normal: {
              show: true,
              formatter: '{b}',
              color: '#fff',
              textStyle: {
                fontSize: '20'
              }
            },
          },
          itemStyle: {
            normal: {
              color: '#00acea'
            }
          },
          data: datas
        }]
      };

      this.$jqPost(this.$api.getHotApp, {
        dataSource: "04",
        objType: "02",
        selName: "全部",
        sFJNM: "00010001001400090001",
        selDateB: new Date(new Date() - 24 * 60 * 60 * 1000).format('yyyy-mm-dd'),
        selDateE: new Date().format('yyyy-mm-dd')
      }).then(res => {
        if (res.retCode == 200 && res.retData) {
          this.handelData(res.retData.listData);
        }
      })


      // chart.setOption(option);

    },
    methods: {
      handelData(list) {
        var plantCap = list;
        var datalist = [{
          offset: [88, 57],
          opacity: .75,
          color: '#D2CEEF'
        }, {
          offset: [43, 77],
          opacity: .88,
          color: '#B5C3F0'
        }, {
          offset: [39, 42],
          opacity: .84,
          color: '#B5C3F0'
        }, {
          offset: [83, 30],
          opacity: .8,
          color: '#839DE7'
        }, {
          offset: [40, 15.5],
          opacity: .75,
          color: '#FFD694'
        }, {
          offset: [59.5, 18.5],
          opacity: .6,
          color: '#FFD694'
        }, {
          offset: [65, 57],
          opacity: .68,
          color: '#D8EEE2'
        }, {
          offset: [27, 19],
          opacity: .6,
          color: '#7CCAA2'
        }, {
          offset: [23, 64.5],
          opacity: .68,
          color: '#BEE5D0'
        }, {
          offset: [19, 44],
          opacity: .6,
          color: '#8985D2'
        }];

        var datas = [];
        for (var i = 0; i < plantCap.length; i++) {
          var item = plantCap[i];
          var itemToStyle = datalist[i];
          datas.push({
            name: item.apptype + '\n' + item.appcount + ' %',
            value: itemToStyle.offset,
            symbolSize: Math.sqrt(item.appcount * 10) * 12,
            label: {
              normal: {
                textStyle: {
                  fontSize: 13
                }
              }
            },
            itemStyle: {
              normal: {
                color: itemToStyle.color,
                opacity: itemToStyle.opacity
              }
            },
          })
        };

        var option = {
          grid: {
            show: false,
            top: 10,
            bottom: 10
          },
          xAxis: [{
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            nameLocation: 'middle',
            nameGap: 5
          }],
          yAxis: [{
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: 'middle',
            nameGap: 30
          }],
          series: [{
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: '{b}',
                color: '#fff',
                textStyle: {
                  fontSize: '20'
                }
              },
            },
            itemStyle: {
              normal: {
                color: '#00acea'
              }
            },
            data: datas
          }]
        };

        this.chart.setOption(option);
      }
    },
  }
</script>

<style>
</style>
